<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加商品类别</title>
<jsp:include page="common.jsp" ></jsp:include>
<link rel="stylesheet" href="${base}/final/css/layui.css" media="all">
</head>
<body>
	<div class="layui-row">
		<div class="layui-col-md4 layui-col-md-offset3">
		<!-- 表单开始 -->
			<form class="layui-form layui-form-pane" id="addCateForm" method="post">
				<input id="cid" name="id"  value='${category.id}'> 
				<div class="layui-form-item">
					<label class="layui-form-label">分类名称</label>
					<div class="layui-input-block">
						<input type="text" name="name" autocomplete="off" value='${category.name}'
							placeholder="请输入分类名称"  class="layui-input" lay-verify="titleName">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">上级分类</label>
					<div class="layui-input-block">
						<select id="cate"  name="parent_id" lay-filter="aihao" >
							<option value="0">无上级分类</option>
						</select>
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">是否显示</label>
						<div class="layui-input-block">
							<input type="radio" name="status" value="1" title="是" checked="">
							<input type="radio" name="status" value="0" title="否">
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">导航栏显示</label>
						<div class="layui-input-block">
							<input type="radio"  name="shownav" value="1" title="是" checked="" >
							<input type="radio" name="shownav" value="0" title="否" >
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-col-md4 layui-col-md-offset3">
						<button class="layui-btn" lay-submit>提交</button>
						<!-- 无法重置 ,类型reset-->
						<button class="layui-btn" type="reset">重置</button>
					</div>
				</div>
			</form>
		<!-- 表单结束 -->
		</div>
	</div>
	<script src="${base}/final/js/jquery-1.7.2.min.js"></script>
	<script src="${base}/final/layui.all.js" type="text/javascript" charset="utf-8"></script>
	<script>
	var form;
	var layer;
	layui.use(['form', 'layedit', 'laydate'], function(){
		  form = layui.form
		  layer = layui.layer
		 
		  form.verify({
			  titleName:[
				  /^[\S]{2,8}$/
				    ,'分类名称必须4到8位，且不能出现空格'
			  ]
		  })
		
	})
	//从数据库中获取分类名称，通过ajax渲染页面，分类，我需要从数据库中得到所有的分类（list）
	//ajax提交给后台，并提示，给servlet
	$(document).ready(function(){
		var cateid = '${category.id}';
		
		$.ajax({
			url:"${base}finalCategoryServlet.do",
			type:'post',
			async:true,
			data:{
				method:'initParent',
			},
			dataType:'json',
			success:function(data){
				var cateArr=data;
				console.info(cate)
				//'"+cateArr[i].id==cateid?'selected':''"+'
				for(var i=0;i<cateArr.length;i++){
					$("#cate").append("<option  value='"+cateArr[i].id+"'>"+cateArr[i].name+"</option>")
				}
				form.render('select'); 
			},
		}),
		
		form.on('submit()', function(data){
			if(cateid!=0){
				//此时是修改
				var cateData=JSON.stringify(data.field);
				  $.post("${base}finalCategoryServlet.do",{'method':"updateCate",'dataN':cateData},function(data){
					  if(data=='ok'){
						  layer.msg("类别修改成功", {time:1000});
						  $("#addCateForm")[0].reset();
						  layui.form.render();
					  }
				  });
			}else{
				console.log(data.field) //被执行提交的form对象，一般在存在form标签时才会返回
				var cateData=JSON.stringify(data.field);
				  $.post("${base}finalCategoryServlet.do",{'method':"addCate",'dataN':cateData},function(data){
					  if(data=='ok'){
						  layer.msg("类别添加成功", {time:1000});
						  $("#addCateForm")[0].reset();
						  layui.form.render();
					  }
				  });
			}
			return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
		});
	})

	</script>
</body>
</html>